//获取操作对象
var div1=document.querySelector('#jion')
var small=document.querySelector('#small')
var big=document.querySelector('#big')
var mSpan = document.getElementById('model').getElementsByTagName('span');//获取model下的所有span节点
var introduce = document.getElementsByClassName('introduce')[0];
var  shopname = document.getElementsByClassName('shopname')[0];
var price = document.getElementsByClassName('price')[0]; 
console.log(introduce);
//获取地址栏中的信息
var search1=location.search
var data//存放当前商品信息
//判断地址栏中是否有参数
if(search1){
    //分割字符串，转为数组，并获取id值
    var id1=search1.split('=')[1];
    //使用自执行函数获取响应结果
    (async function(){
        //获取响应结果
        data=await PromiseAjax({
            url:'../php/xiangqing.php',
            data:'id='+id1
        })
        //把接收到的数据转为json对象
        data=eval('('+data+')')
        console.log(data.names);
        shopname.innerHTML=data.names;
        price.innerHTML=data.goods_price;
        
       

    /* 
			需求分析:
				1 鼠标移入small盒子，mask会显示，big盒子会显示
				2 鼠标移出small盒子，mask会隐藏，big会隐藏
				3 鼠标在small盒子中移动
				4 mask会跟随鼠标移动，鼠标在mask的中间
				5 big盒子里面显示bigImg的对应部分
		*/
    var str=`<img src="${data.picture}" alt="" style="wight:200px;height:200px"/>`;
    var str1=`<img src="${data.picture}" alt="" id="bigImg"/>`;
    var str2=` ${data.goods_introduce}`
    introduce.innerHTML=str2;

    var mask=document.createElement('div')
    //创建遮罩层
    mask.id="mask"//为mask添加id名
    //把当前设置完毕的信息，渲染到盒子中
    small.innerHTML=str//小图片放入到小盒子
    big.innerHTML=str1//大图片放入到大盒子
	// 获取相关元素
	var smallBox = document.getElementById('small');//small盒子
	var bigBox = document.getElementById('big');//big盒子
	var bigImg = document.getElementById('bigImg');//大图片 
    small.appendChild(mask)//添加到small中
    //设置mask样式
    mask.style.width="80px"
    mask.style.height="80px"
    mask.style.background="red"
    mask.style.opacity="0.5"
    mask.style.position="absolute"
    mask.style.display="none"
    mask.style.top="0px"
    mask.style.left="100px"
		var box = smallBox.parentNode;
		// 1 鼠标移入small盒子
		smallBox.onmouseenter = function(){
			// mask会显示，big盒子会显示
			mask.style.display = "block";
			bigBox.style.display = "block";
		}
		// 2 鼠标移出small盒子
		smallBox.onmouseleave = function(){
			// mask会隐藏，big会隐藏
			mask.style.display = "none";
			bigBox.style.display = "none";
		}

		// 获取页面滚动的距离
		function getScroll(){
    return {
      top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop, //向上滚动的距离
      left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft //向左滚动的距离
    }
		}

		// 3 鼠标在small盒子中移动
		smallBox.onmousemove = function(e){
			e = e||window.event;
			// 4 mask会跟随鼠标移动,mask是相对small定位
			// 要计算鼠标距离small的上和左的距离
			var left = e.clientX + getScroll().left - box.offsetLeft - 1;
			// console.log(left);
			var top = e.clientY + getScroll().top - box.offsetTop - 1;
			
			// 鼠标在mask的中间
			left = left - mask.offsetWidth/2;
			top = top - mask.offsetHeight/2;
			// 边界检查
			if(left<0){
				left = 0
			}
			if(left>smallBox.offsetWidth - mask.offsetWidth){
				left=smallBox.offsetWidth - mask.offsetWidth
			}
			if(top<0){
				top=0
			}
			if(top>smallBox.offsetHeight-mask.offsetHeight){
				top=smallBox.offsetHeight-mask.offsetHeight
			}

			mask.style.left = left+"px";
			mask.style.top = top+"px";
			 
			// 5 big盒子里面显示bigImg的对应部分
			// 水平方向：left占小盒子宽度的多少，bigImg就从哪里开始显示
			bigImg.style.left = -left/smallBox.offsetWidth*bigImg.offsetWidth + "px";
			// 垂直方向：top占小盒子宽度的多少，bigImg就从哪里开始显示
			bigImg.style.top = -top/smallBox.offsetHeight*bigImg.offsetHeight + "px";

			
		}
    })()
}else{
    alert('非法进入')
    //重新跳回列表页
    location='./list.html'
}

//给添加购物车按钮对象添加点击事件
div1.onclick=function(e){
    var e = e || window.event
    //获取操作对象
    var target=e.target || e.srcElement 
    //获取localStorage中的cartList键值
    var cartList=localStorage.getItem("cartList")||[]
    //判断当前数组的长度是否大于0
    if(cartList.length>0){
        //把当前cartList转为数组对象
        cartList=eval('('+cartList+')')
        var bool=false //验证当前商品是否在locaStrong中存在
        //遍历当前数组
        cartList.forEach(item=>{
            //判断遍历出来的商品是否跟当前要添加的商品一致
            if(item.goods_id==data.goods_id){
                item.cart_number+=1
                bool=true
                 //重新给locaStrong赋值
                localStorage.setItem("cartList",JSON.stringify(cartList))
            }
        })

        if(!bool){
            //修改当前商品数量
            data.cart_number=1
            //直接把当前商品追加到cartList数组中
            cartList.push(data)
             //重新给locaStrong赋值
            localStorage.setItem("cartList",JSON.stringify(cartList))
        }
    }else{
        //修改当前商品数量
        data.cart_number=1
        //把当前商品信息追加到数组中
        cartList.push(data)
        //重新给locaStrong赋值
        localStorage.setItem("cartList",JSON.stringify(cartList))
    }
    alert('商品添加成功')
}

